import React from 'react'
import {
  Tag,
  Form,
  Row,
  Col,
  Select,
  Space,
  Input,
  Collapse,
  Table,
  Button,
} from 'antd'
const { Panel } = Collapse

export default function Cards() {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ]
  const columns = [
    {
      title: '指定渠道编码',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '指定渠道名称',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '所在地',
      dataIndex: 'address',
      key: 'address',
    },
  ]

  return (
    <div>
      <Form initialValues={
         {
          qysj:"2023-3-14 12:00:00",
          gjzb:'金额',
          cxzb:'金额',
          gjqd:'指定渠道',
          xyzt:'正常'
         }
      }>
        <Row>
          <Col span={11}>
            <Form.Item
              label="协议客户"
              name="xykh"
              rules={[
                {
                  required: true,
                  message: '请选择!',
                },
              ]}
            >
              <Space>
                <Button>选择客户</Button>
                <span>上海xxxx公司</span>
              </Space>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item label="协议状态" name="xyzt">
              <Select
             
                style={{
                  width: 150,
                }}
                options={[
                  {
                    value: '正常',
                    label: '正常',
                  },
                ]}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={11} style={{ display: 'flex' }}>
            <Space>
              <Form.Item label="购进指标" name="gjzb">
                <Select
                  style={{
                    width: 80,
                  }}
                  options={[
                    {
                      value: '金额',
                      label: '金额',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item name="jesl">
                <Input
                  placeholder="输入金额/数量"
                  disabled
                  style={{ width: 300 }}
                />
              </Form.Item>
            </Space>
          </Col>
          <Col span={11}>
            <Space>
              <Form.Item label="纯销指标" name="cxzb">
                <Select
                  style={{
                    width: 80,
                  }}
                  options={[
                    {
                      value: '金额',
                      label: '金额',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item name="jesl2">
                <Input
                  placeholder="输入金额/数量"
                  disabled
                  style={{ width: 300 }}
                />
              </Form.Item>
            </Space>
          </Col>
        </Row>
        <Row>
          <Col span={11}>
            <Form.Item label="销售区域" name="xsqy">
              <Space size={[0, 8]} wrap>
                <Tag>选择区域</Tag>
                <Tag closable>
                  <span>全国</span>
                </Tag>
              </Space>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item label="签约时间" name="qysj" >
              <Input style={{ width: 400 }}  />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Form.Item label="购进渠道" name="gjqd">
                      <Select
                  style={{
                    width: 100,
                  }}
                  options={[
                    {
                      value: '指定渠道',
                      label: '指定渠道',
                    },
                  ]}
                /> 
              </Form.Item>
              <Button className='antbtn'>请选择渠道</Button>
        </Row>
        
        <Row>
          <Col span={1}></Col>
          <Col span={23}>
            <Table
              dataSource={dataSource}
              columns={columns}
              size="small"
              pagination={false}
            />
          </Col>
        </Row>
      </Form>
    </div>
  )
}

